<template>
  <div v-loading="loading" style="min-height: calc(100vh - 180px)">
    <dk-wu-jie
      v-if="routerData.type === 'wujie'"
      width="100%"
      height="100%"
      :plugins="plugins"
      :name="routerData.name"
      :url="routerData.url"
      :sync="true"
    />
  </div>
</template>

<script>
export default {
  props: {
    value: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      key: this.$route.params.key,
      routerData: {},
      plugins: [
        {
          appendOrInsertElementHook: function(element, iframeWindow) {
            if (element.offsetParent && element.offsetParent.tagName !== 'BODY') {
              return
            }
            const offsetParentDesc = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetParent')
            Object.defineProperties(element, {
              offsetParent: {
                configurable: true,
                get: function() {
                  const offsetParent = offsetParentDesc.get.call(this)
                  if ((offsetParent && offsetParent.tagName !== 'BODY') || element.style.position !== 'fixed') {
                    return offsetParent
                  }
                  return new Proxy(window.document.documentElement, {
                    get: (target, propKey) => {
                      if (propKey === 'parentNode') {
                        return iframeWindow.document.documentElement.parentNode
                      }
                      const value = target[propKey]
                      const naughtySafari = typeof document.all === 'function' && typeof document.all === 'undefined'
                      // 只有这些场景下才需要 bind
                      if (
                        (naughtySafari
                          ? typeof value === 'function' && typeof value !== 'undefined'
                          : typeof value === 'function') &&
                        // eslint-disable-next-line no-prototype-builtins
                        !(value.name.indexOf('bound ') === 0 && !value.hasOwnProperty('prototype'))
                      ) {
                        const boundValue = Function.prototype.bind.call(value, target)
                        for (const key in value) {
                          boundValue[key] = value[key]
                        }
                        // eslint-disable-next-line no-prototype-builtins
                        if (value.hasOwnProperty('prototype') && !boundValue.hasOwnProperty('prototype')) {
                          Object.defineProperty(boundValue, 'prototype', {
                            value: value.prototype,
                            enumerable: false,
                            writable: true
                          })
                        }
                        return boundValue
                      }
                      return value
                    }
                  })
                }
              }
            })
          }
        }
      ]
    }
  },
  computed: {
    customerMenu() {
      return this.$store.state.app.customerMenu || []
    },
    loading() {
      return this.customerMenu.length <= 0 && !this.routerData.url
    }
  },
  watch: {
    customerMenu() {
      this.showWuJe()
    }
  },
  created() {

  },
  mounted() {
    this.showWuJe()
  },
  methods: {
    showWuJe() {
      this.routerData = this.customerMenu[this.key] || {}
    }
  }
}
</script>

<style scoped lang="scss">

</style>
